<script setup>
// 在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。
// 这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。

// <script setup> 中的顶层的导入和变量声明可在同一组件的模板中直接使用。
// 你可以理解为模板中的表达式和 <script setup> 中的代码处在同一个作用域中。
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

onMounted(() => {
  console.log('初识count值为', count.value)
})
</script>

<template>
  <button @click="increment">count is : {{ count }}</button>
</template>

<style></style>
